import QtQuick 2.0
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
import QtMultimedia 5.2
import DataMan 0.1
import QtGraphicalEffects 1.0
import "../utils.js" as Utils;

Item {
    anchors.fill: parent

    Image {
	    id: bg
	    source: "image://default/start/bg.jpg"
	    anchors.fill: parent
	    transformOrigin: Item.Center
	    // 出场动画: 三个光球间隔喷射后弹出两只怪兽漂浮
	    Image {
		    id: blue
		    x: 295
		    y: parent.height - 195 - height
		    scale: 0.1
		    transformOrigin: Item.BottomLeft
		    source: "image://default/start/blue.png"
		    SequentialAnimation {
			    running: true
			    PauseAnimation { duration: 100 }
			    ParallelAnimation {
				    PropertyAnimation {
					    target: blue
					    property: "scale"
					    duration: 1000
					    to: 4
				    }
				    PropertyAnimation {
					    target: blue
					    property: "x"
					    duration: 1000
					    to: blue.x + 346
				    }
				    PropertyAnimation {
					    target: blue
					    property: "y"
					    duration: 1000
					    to: blue.y - 408
				    }
			    }
			    onStopped:  blue.destroy();
		    }
	    }

	    Image {
		    id: yellow
		    x: 265 - width / 2
		    y: parent.height - 195 - height
		    scale: 0.1
		    visible: false
		    transformOrigin: Item.Bottom
		    source: "image://default/start/yellow.png"
		    PauseAnimation {
			    running: true
			    duration: 300
			    onStopped: {
				    yellow.visible = true;
				    ysani.start();
			    }
		    }
		    ParallelAnimation {
			    id: ysani
			    running: false

			    PropertyAnimation {
				    target: yellow
				    property: "scale"
				    duration: 800
				    to: 4
			    }

			    PropertyAnimation {
				    target: yellow
				    property: "x"
				    duration: 800
				    to: yellow.x + 80
			    }
			    PropertyAnimation {
				    target: yellow
				    property: "y"
				    duration: 800
				    to: yellow.y - bg.height
			    }
			    onStopped: yellow.destroy();
		    }
	    }

	    Image {
		    id: pink
		    visible: false
		    x: 235 - width
		    y: parent.height - 195 - height
		    transformOrigin: Item.BottomRight
		    scale: 0.1
		    source: "image://default/start/pink.png"

		    PauseAnimation {
			    running: true
			    duration: 500
			    onStopped: {
				    pink.visible = true;
				    psani.start();
			    }
		    }

		    ParallelAnimation {
			    id: psani
			    running: false
			    PropertyAnimation {
				    target: pink
				    property: "scale"
				    duration: 1000
				    to: 4
			    }

			    PropertyAnimation {
				    target: pink
				    property: "x"
				    duration: 800
				    to: pink.x - bg.width
			    }
			    PropertyAnimation {
				    target: pink
				    property: "y"
				    duration: 800
				    to: pink.y - bg.height
			    }

			    onStopped: {
				    pink.destroy();
			    }
		    }
	    }

	    // 绿怪兽
	    Image {
		    id: gmonster
		    visible: false
		    transformOrigin: Item.Bottom
		    x: 350 - width / 2
		    y: bg.height - 200 - height
		    rotation: -30
		    scale: 0.2
		    source: "image://default/start/green0.png"

		    PauseAnimation {
			    running: true
			    duration: 450
			    onStopped: {
				    gmonster.visible = true;
				    gsani0.start();
			    }
		    }

		    ParallelAnimation {
			    running: false
			    id: gsani0

			    PropertyAnimation {
				    target: gmonster
				    property: "scale"
				    duration: 250
				    to: 1
			    }

			    PropertyAnimation {
				    target: gmonster
				    property: "x"
				    duration: 250
				    to: 420 - gmonster.width / 2
			    }

			    onStopped: {
				    gmonster.source = "image://default/start/green.png";
				    gsani1.start();
			    }
		    }

		    SequentialAnimation {
			    running: false
			    id: gsani1
			    PropertyAnimation {
				    target: gmonster
				    property: "y"
				    duration: 800
				    to: gmonster.y + 20
			    }
			    PropertyAnimation {
				    target: gmonster
				    property: "y"
				    duration: 800
				    to: gmonster.y - 20
			    }
			    loops: Animation.Infinite
		    }
	    }
	    // 红怪兽
	    Image {
		    id: rmonster
		    visible: false
		    transformOrigin: Item.Bottom
		    x: 280 - width / 2
		    y: bg.height - 166 - height
		    source: "image://default/start/red0.png"
		    scale: 0.2
		    rotation: -60

		    PauseAnimation {
			    running: true
			    duration: 750
			    onStopped: {
				    rmonster.visible = true;
				    rsani0.start();
			    }
		    }

		    ParallelAnimation {
			    running: false
			    id: rsani0

			    PropertyAnimation {
				    target: rmonster
				    property: "scale"
				    duration: 250
				    to: 1
			    }
			    PropertyAnimation {
				    target: rmonster
				    property: "x"
				    duration: 250
				    to: 250 - rmonster.width / 2
			    }

			    PropertyAnimation {
				    target: rmonster
				    property: "y"
				    duration: 250
				    to: rmonster.y + 66
			    }

			    onStopped: {
				    rmonster.source = "image://default/start/red.png"
				    rsani1.start();
				    view.visible = true;
			    }
		    }

		    SequentialAnimation {
			    id: rsani1
			    running: false
			    loops: Animation.Infinite
			    ParallelAnimation {
				    PropertyAnimation {
					    target: rmonster
					    property: "x"
					    to: rmonster.x + 20
					    duration: 800
				    }

				    PropertyAnimation {
					    target: rmonster
					    property: "y"
					    to: rmonster.y + 10
					    duration: 800
				    }
			    }
			    ParallelAnimation {
				    PropertyAnimation {
					    target: rmonster
					    property: "x"
					    to: rmonster.x - 20
					    duration: 800
				    }

				    PropertyAnimation {
					    target: rmonster
					    property: "y"
					    to: rmonster.y - 10
					    duration: 800
				    }
			    }
		    }
	    }

	    PropertyAnimation {
		    id: startGameAni
		    property bool ng: false
		    running: false
		    target: bg
		    property: "scale"
		    duration: 300
		    to: 4
		    onStarted: {
			    view.visible = false;
			    rmonster.visible = false;
			    gmonster.visible = false;
		    }
		    onStopped: {
			    Utils.AppWin.runScene("GameScene{newgame:" + ng + "}");
		    }
	    }

	    // 界面的可操控元素
	    Item {
		    id: view
		    visible: false
		    anchors.centerIn: parent
		    width: parent.width
		    height: parent.height

		    ImgBtn {
			    id: startBtn
			    x: bg.width / 2 - 13 - width / 2
			    y: bg.height / 2 + 140 - height / 2
			    normalImg: "image://default/start/new.png"
			    showAni: true
			    onClicked: {
				    if (DataMan.firstPlay) {
					    startGameAni.ng = true;
					    startGameAni.start();
				    } else {
					    newGameDialog.visible = true;
				    }
			    }
		    }

		    ImgBtn {
			    id: continueBtn
			    x: startBtn.x + 180
			    y: startBtn.y + 180
			    normalImg: "image://default/start/continue.png"
			    showAni: true
			    onClicked: {
				    startGameAni.ng = DataMan.firstPlay;
				    startGameAni.start();
			    }
		    }

		    ImgBtn {
			    id: musicBtn
			    x: bg.width - 5 - width
			    y: 5
			    onClicked: {
				    DataMan.music = !DataMan.music;
				    normalImg = "image://default/start/music_" + (DataMan.music ? "on.png" : "off.png");
				    source = normalImg;
				    if (DataMan.music)
					    Utils.BGM.play();
				    else
					    Utils.BGM.stop();

			    }
			    showAni: true
			    // 根据配置文件进行判定
			    normalImg: "image://default/start/music_" + (DataMan.music ? "on.png" : "off.png");
		    }

		    ImgBtn {
			    id: aboutBtn
			    x: 5
			    y: -2
				onClicked: {
					about.visible = true;
				}
			    normalImg: "image://default/start/about_n.png"
			    selectedImg: "image://default/start/about_s.png"
		    }
	    }
    }

	FastBlur {
		id: blurBg
		anchors.fill: bg
		source: bg
		radius: 32
		visible: false
	}

    AboutView {
	    id: about
	    visible: false
	    onVisibleChanged: {
//		    view.visible = !visible;
			blurBg.visible = visible;
			bg.visible = !visible;
	    }
    }

    AskDialog {
	    id: newGameDialog
	    visible: false
	    msg: qsTr("创建新游戏，将清除之前的<br>进度，确定要这么做吗？")
	    onOk: {
		    startGameAni.ng = true;
		    startGameAni.start();
	    }
    }
}
